<template>
  <el-dialog title="添加用户" :visible.sync="dialog_visible">
    <div class="form-padding">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        auto-complete="on"
        label-width="90px"
        style="width: 100%"
      >
        <el-form-item label="账号" prop="account">
          <el-input placeholder="请输入账号" v-model="temp.account" />
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="temp.pwd"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="re_pwd">
          <el-input
            type="password"
            placeholder="请输入确认密码"
            v-model="temp.re_pwd"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add, existAccount } from "@/api/right";
export default {
  name: "userAdd",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const validateuser_pwd = (rule, value, callback) => {
      if (value.length > 30) {
        callback(new Error("密码不能太长！"));
      } else {
        callback();
      }
    };
    const validateuser_repwd = (rule, value, callback) => {
      if (value !== this.temp.pwd) {
        callback(new Error("确认密码与新密码不一致"));
      } else {
        callback();
      }
    };
    const validateaccount = (rule, value, callback) => {
      if (value.length > 30) {
        callback(new Error("账号太长！"));
      } else if (value.length < 4) {
        callback(new Error("账号太短！"));
      } else {
        callback();
      }
    };
    const validateaccountpost = (rule, value, callback) => {
      existAccount({ account: value }).then((response) => {
        if (response.data > 0) {
          callback(new Error("该账号已经存在！"));
        } else {
          callback();
        }
      });
    };
    return {
      username: "",
      temp: {
        id: 0,
        account: "",
        pwd: "",
        re_pwd: "",
      },
      rules: {
        account: [
          { required: true, message: "账号不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validateaccount },
          { required: true, trigger: "blur", validator: validateaccountpost },
        ],
        pwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validateuser_pwd },
        ],
        re_pwd: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validateuser_repwd },
        ],
      },
    };
  },
  computed: {
    dialog_visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  watch: {
    dialog_visible(newValue, oldValue) {
      if (newValue) {
        this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
        this.$refs["dataForm"] && this.$refs["dataForm"].resetFields();
      }
    },
  },
  created() {},
  methods: {
    cancel() {
      this.dialog_visible = false;
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const param = {
            account: this.temp.account,
            password: this.temp.pwd,
          };
          add(param).then((response) => {
            if (response.data > 0) {
              setTimeout(() => {
                this.dialog_visible = false;
                this.$message({
                  type: "success",
                  message: "账号新建成功!",
                });
                this.$emit("success", param);
              }, 200);
            } else {
              this.$message({
                type: "info",
                message: "账号新建失败",
              });
            }
          });
        }
      });
    },
  },
};
</script>